import React, { Component } from 'react';
import { connect } from 'dva';
import { Modal, Form, Input, Radio, Spin, message } from 'antd';

const FormItem = Form.Item;
@connect(state => ({
    ${classObjectName}: state.${classObjectName}
}))
@Form.create()
export default class ${className}CreateForm extends Component{
    constructor(props) {
        super(props);
        this.state = {visible: false};
    }
    /**
    * 打开添加窗口
    * @param e
    */
    showModelHandler = (e) => {
        if (e) e.stopPropagation();
            this.setState({visible: true});
    };
    /**
    *  隐藏窗口
    */
    hideModelHandler = () => {
        this.setState({visible: false});
    };
    /**
    *  提交表单数据
    */
    submitHandler = () => {
        this.props.form.validateFields((err, values) => {
            if (!err) {
                const { dispatch } = this.props;
            dispatch({
                type: '${classObjectName}/add',
                payload: {values},
                callback:(response) => {
                    this.hideModelHandler();
                }
            });
        }
        });
    };
    /**
    * 清除表单数据
    */
    handleFormClear = () =>{
        const { form } = this.props;
        form.resetFields();
    };

    render(){
        const { children, form, ${classObjectName}:{ loading }} = this.props;
        const { getFieldDecorator } = form;
        const formItemLayout = {
            labelCol: {
                xs: { span: 10 },
                sm: { span: 5 },
            },
            wrapperCol: {
                xs: { span: 24 },
                sm: { span: 14 },
            },
        };
        return (
            <span>
                <span onClick={this.showModelHandler}>
                  { children }
                </span>
                <Modal visible={this.state.visible} title="创建表单" okText="提交" confirmLoading={loading} afterClose={this.handleFormClear} onCancel={this.hideModelHandler} onOk={this.submitHandler}>
                    <Form layout="vertical">
                        <#list fields as field>
                            <#if field.fieldName != keyName>
                        <FormItem {...formItemLayout} label="${field.remarks}" hasFeedback>
                          {getFieldDecorator('${field.remarks}', {initialValue:null,
                            rules: [{ required: true, message: '请输入${field.remarks}！'}],
                          })(<Input />)}
                        </FormItem>
                            </#if>
                        </#list>
                  </Form>
                </Modal>
              </span>
        );
    }
}